<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import * as echarts from 'echarts/core';

defineOptions({
  name: 'BarChartTwo'
});

const appStore = useAppStore();
const salvProName = ["安徽省", "河南省", "浙江省", "湖北省", "贵州省", "江西省", "江苏省", "四川省", "云南省", "湖南省"];
const salvProValue = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55];
const salvProMax = [];//背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
  salvProMax.push(salvProValue[0])
}
const { domRef, updateOptions } = useEcharts(() => ({


  backgroundColor: "#003366",
  grid: {
    left: '2%',
    right: '2%',
    bottom: '2%',
    top: '2%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'none'
    },
    formatter: function (params) {
      return params[0].name + ' : ' + params[0].value
    }
  },
  xAxis: {
    show: false,
    type: 'value'
  },
  yAxis: [{
    type: 'category',
    inverse: true,
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      },
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    data: salvProName
  }, {
    type: 'category',
    inverse: true,
    axisTick: 'none',
    axisLine: 'none',
    show: true,
    axisLabel: {
      textStyle: {
        color: '#ffffff',
        fontSize: '12'
      },
    },
    data: salvProValue
  }],
  series: [{
    name: '值',
    type: 'bar',
    zlevel: 1,
    itemStyle: {
      normal: {
        barBorderRadius: 30,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
          offset: 0,
          color: 'rgb(57,89,255,1)'
        }, {
          offset: 1,
          color: 'rgb(46,200,207,1)'
        }]),
      },
    },
    barWidth: 20,
    data: salvProValue
  },
  {
    name: '背景',
    type: 'bar',
    barWidth: 20,
    barGap: '-100%',
    data: salvProMax,
    itemStyle: {
      normal: {
        color: 'rgba(24,31,68,1)',
        barBorderRadius: 30,
      }
    },
  },
  ]

}));

async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });

  updateOptions(opts => {
    // opts.series[0].data = [
    //   { name: $t('page.home.study'), value: 20 },
    //   { name: $t('page.home.entertainment'), value: 10 },
    //   { name: $t('page.home.work'), value: 40 },
    //   { name: $t('page.home.rest'), value: 30 }
    // ];

    return opts;
  });
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();

    // opts.series[0].name = originOpts.series[0].name;

    // opts.series[0].data = [
    //   { name: $t('page.home.study'), value: 20 },
    //   { name: $t('page.home.entertainment'), value: 10 },
    //   { name: $t('page.home.work'), value: 40 },
    //   { name: $t('page.home.rest'), value: 30 }
    // ];

    return opts;
  });
}

async function init() {
  mockData();
}

watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

// init
init();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-360px overflow-hidden"></div>
  </ACard>
</template>

<style scoped></style>
